<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('AdminOrder/courseList')}">课程列表</a></li>
        <li class="active"><a href="#">录入订单</a></li>
    </ul>
    <form action="{:url('AdminOrder/addOrderSave')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-5">
                <table class="table table-bordered">
                    <tr>
                        <th width="150">课程名称</th>
                        <td>
                            {$data.title}
                        </td>
                    </tr>                   
                    <tr>
                        <th >班别</th>
                        <td>
                            {$data.school_class.name}
                        </td>
                    </tr>
                    <tr>
                        <th >教师</th>
                        <td>
                            {$data.school_teacher.name}
                        </td>
                    </tr>
                    <tr>
                        <th>课室</th>
                        <td>
                            {$data.classroom}               
                        </td>
                    </tr>
                    <tr>
                        <th>班额/已报</th>
                        <td>
                            {$data.num}/{$data.order_count}
                        </td>
                    </tr>                    
                    <tr>
                        <th>价格</th>
                        <td>
                            {$data.price}               
                        </td>
                    </tr>  
                    <tr>
                        <th>开班时间</th>
                        <td>
                            {$data.open_time}                 
                        </td>
                    </tr>
                    <tr>
                        <th>报名时间</th>
                        <td>
                            {$data.signup_time}                          
                        </td>
                    </tr>
                    <tr>
                        <th>上课时间</th>
                        <td>
                            {$data.class_time}                          
                        </td>
                    </tr>
                    <tr>
                        <th>报名截止时间</th>
                        <td>
                            {$data.cutoff_time}                       
                        </td>
                    </tr>
                    <tr>
                        <th>报名条件</th>
                        <td>
                            {$data.excerpt}       
                        </td>
                    </tr>                           
                </table>
                <hook name="portal_admin_article_edit_view_main"/>
                
            </div>
            <div class="col-md-7">
                <table class="table table-bordered">
                    <tr>
                        <th width="150">学员名称</th>
                        <td>
                            <input class="form-control" type="text" name="student_name" id="student_name" 
                            required placeholder="请输入学员名称">   
                        </td>
                    </tr>
                    <tr>
                        <th>家长名称</th>
                        <td>
                            <input class="form-control" type="text" name="parent_name" id="parent_name" 
                            required placeholder="请输入家长名称">   
                        </td>
                    </tr> 
                    <tr>
                        <th>联系电话</th>
                        <td>
                            <input class="form-control" type="text" name="phone" id="phone" 
                            required placeholder="请输入联系电话">   
                        </td>
                    </tr>                        
                    <tr>
                        <th>学校</th>
                        <td>
                            <input class="form-control" type="text" name="current_school" id="current_school" 
                            required placeholder="请输入学校名称">   
                        </td>
                    </tr> 
                    <tr>
                        <th>支付方式<span id="post-status-error" style="color: red;display: none"></span></th>
                        <td>                                  
                                <input type="radio" id="post-status-checkbox" name="pay_type" value="1" onclick="chanePay(1)"> 现金
                                <input type="radio" id="post-status-checkbox" name="pay_type" value="0" onclick="chanePay(0)"> 微信   
                                <input type="radio" id="post-status-checkbox" name="pay_type" value="2" onclick="chanePay(2)"> 扫码                             
                        </td>
                    </tr>     
                    <tr id="pays">
                            <th>支付状态<span id="post-status-error" style="color: red;display: none"></span></th>
                            <td>  
                                    <input type="radio" id="post-status-checkbox" name="pay_status" value="0"> 未支付
                                    <input type="radio" id="post-status-checkbox" name="pay_status" value="1"> 已支付                                
                            </td>
                        </tr>                     
                    <tr>
                        <th>座位</th>
                        <td>        
                                <input class="form-control" type="text" value="" name="seat"
                                id="seat" required readonly/> 
                                <div class="seats">                                        
                                </div>                                        
                        </td>
                    </tr>   
                </table>

                <hook name="portal_admin_article_edit_view_right_sidebar"/>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                            <input id="price" type="hidden" name="price" value="{$data.price}">
                        <input id="course_id" type="hidden" name="course_id" value="{$id}">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                        <a class="btn btn-default" href="{:url('AdminOrder/courseList')}">{:lang('BACK')}</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<style>
    .seats{
        margin:0 auto;
        width:400px;  
        margin-top:5px;       
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        justify-content:flex-start;  
        overflow: hidden;
        white-space: nowrap;       
    }
    .seats .item{  
        margin-top:5px;
    }
    .seats .seat-item{
        width:40px;
        height:40px;
        margin:1px;
    }
    .m-right{
  margin-right:20px;
}
.selected{
  background-color: #6ce653;
  border-radius: 13px;
}
.disabled{
  background-color: #c5c8ce;
  border-radius: 13px;
}
</style>

<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
   function doSelectSeat() {
        var selectedCategoriesId = $('#js-categories-id-input').val();
       
    }
    $(function(){   
        $("#pays").hide()         
       var seats = new Array("{$seats}")
       if(seats.length==1){
           seats=[{$seats}]
       }
       set_seats(seats,"{$data.num}")            
      })
      function set_seats(seats,num){                
          var str ='';
          for(var i=1;i<=parseInt(num);i++){
              var cls='';
              var std='';
              if(i%2==0&&i%8!=0){
                  cls = "m-right";
              }
              if(seats.indexOf(i) != -1){
                  std = "disabled";               
              }             
              str +='<div class="item '+ cls +' '+std +'"><img class="seat-item" src="__STATIC__/images/seat.png" width="40" height="40" data-seat="'+i+'" onClick="selectSeat(this)"/></div>'
          }
          $(".seats").append(str);
      }
    function selectSeat(data){     
        var seat = $(data).data("seat");        
       
        if($("#seat").val()){
            $('[data-seat="'+ $("#seat").val() +'"]').removeClass("selected")
        }           
        $(data).addClass("selected")
        $("#seat").val($(data).data("seat"))            
        
    }
    function chanePay(status){
        if(status==1 || status==2){
            $("#pays").show();
        }else if(status == 0){
            $("#pays").hide()
        }
    }
</script>
</body>
</html>
